
<template>
  <app-dialog v-model="show" width="1000px" title="联赛" @open="handleOpen">
    <div class="title">
      <div>只玩哪些联赛</div>
      <div class="sporttypes">
        <div
          class="sport_item"
          @click="changesport('soccer')"
          :class="activesport == 'soccer' ? 'sport_item_active' : ''"
        >
          足球
        </div>
        <div
          class="sport_item"
          @click="changesport('basketball')"
          :class="activesport == 'basketball' ? 'sport_item_active' : ''"
        >
          篮球
        </div>
      </div>
    </div>

    <el-tabs v-model="areaId" v-loading="showloading" style="min-height: 380px">
      <el-tab-pane :label="area.area" :name="area.areaId" v-for="area in data" :key="area.areaId">
        <el-scrollbar height="380px">
          <el-row>
            <el-col :span="6" v-for="(league, index) in area.leagues" :key="index" style="margin-bottom: 8px">
              <el-checkbox v-model="league.checked" :label="league.league" :value="league.league_id" />
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-tab-pane> 
    </el-tabs>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </app-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { getPlatform } from '@/api'
import { http } from '@/utils/http'

const show = defineModel({ type: Boolean })
const emits = defineEmits()
const props = defineProps({
  data: Object,
})
const showloading = ref(false)

const areaId = ref(null)
const data = ref([])
const activesport = ref('soccer')

const handleOpen = () => {
  showloading.value = true
  let body = {
    params: {
      event_type: 'all',
      bc_type: props.data.bc_type,
      sport_type: activesport.value,
    },
  }

  http.get('/config/get_league_infos', body).then(res => {
    // 把对象转数组
    data.value = Object.keys(res.data).map(key => {
      const item = res.data[key]
      const leagues = []
      for (const key in item.leagues) {
        const league = item.leagues[key]
        leagues.push({
          ...league,
          checked: props.data.place_league[league.league_id] ? true : false,
        })
      }

      return {
        area: item.country,
        areaId: item.country_id,
        leagues,
      }
    })
    showloading.value = false
    areaId.value = data.value[0].areaId
  })
}

const changesport = value => {
  activesport.value = value
  handleOpen()
}

const handleClose = () => (show.value = false)

const handleSubmit = () => {
  const place_league = {}

  data.value.forEach(area => {
    area.leagues.forEach(league => {
      if (league.checked)
        place_league[league.league_id] = {
          league_id: league.league_id,
          league: league.league,
        }
    })
  })

  let a = JSON.parse(JSON.stringify(props.data))
  let body = {
    status: a.status,
    id: a.id,
    login_rule_id: a.login_rule.id,
    group_id: a.group.id,
    source_id: a.source.id,
    money_code: a.money.money_code,
    proxy_ip_id: a.proxy_ip.id,
    user_name: a.user_name,
    pass_word: a.pass_word,
    percent: a.percent,
    remark: a.remark,
    bc_type: a.bc_type,
    amount: a.amount,
    place_league,
    place_pk_key_amount: a.place_pk_key_amount,
    no_place_pk_key: a.no_place_pk_key,
    no_place_pk_type: a.no_place_pk_type,
    place_order_stakes: a.place_order_stakes,
    login_status: a.login_status,
  }

  http.post('/member/member_update', body).then(res => {
    ElMessage.success('操作成功')
    handleClose()
    emits('change2')
  })
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #252a30;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .sporttypes {
    display: flex;
    align-items: center;

    .sport_item {
      width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      color: #778090;
      cursor: pointer;
    }

    .sport_item_active {
      background-color: rgba(71, 172, 255, 0.1);

      color: #252a30;
    }
  }
}
</style>
